  <template>
      <div class="devicepopup">
            <div class="popupheader">
                {{headername}}
                <el-button type="primary" icon="el-icon-close" size="mini"></el-button>
            </div>
            <div class="popupcontent">
                <ul>
                  <li>
                    <span>设备类型</span>
                    <div class="popupbox">
                       <el-select size='mini' v-model="value" placeholder="请选择" popper-class="adb">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>设备ID</span>
                    <div class="popupbox">
                      <el-input
                        v-model="input1"
                        :disabled="true" size="mini">
                      </el-input>
                    </div>
                  </li>
                  <li>
                    <span>设备名称</span>
                    <div class="popupbox">
                      <el-input
                      placeholder='请输入设备名称'  v-model="input2"
                        size="mini">
                      </el-input>
                    </div>
                  </li>
                  <li>
                    <span>功能类型</span>
                    <div class="popupbox">
                       <el-select size='mini' v-model="value1" placeholder="请选择">
                        <el-option
                          v-for="item in GN"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>物理接口</span>
                      <div class="popupbox">
                       <el-select size='mini' v-model="JK" placeholder="请选择">
                        <el-option
                          v-for="item in jks"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>接口ID</span>
                    <div class="popupbox">
                       <el-select size='mini' v-model="JK" placeholder="请选择">
                        <el-option
                          v-for="item in jks"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>设备厂家</span>
                    <div class="popupbox">
                       <el-select size='mini' v-model="JK" placeholder="请选择">
                        <el-option
                          v-for="item in jks"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>产品型号</span>
                    <div class="popupbox">
                       <el-select size='mini' v-model="JK" placeholder="请选择">
                        <el-option
                          v-for="item in jks"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                </ul>
            </div>
            <div class="popupfooter">
                <el-button type="primary" size="mini">保存</el-button>
                <el-button type="primary" size="mini">取消</el-button>
            </div>
      </div>
</template>
<script>
export default {
  name:'popup',
  data () {
    return {
        options: [{
          value: '温湿度传感器',
          label: '温湿度传感器'
        }, {
          value: '不定位水浸传感器',
          label: '不定位水浸传感器'
        }, {
          value: '定位水浸传感器',
          label: '定位水浸传感器'
        }, {
          value: '烟感传感器',
          label: '烟感传感器'
        }, {
          value: '红外传感器',
          label: '红外传感器'
        },
        {
          value: '门磁传感器',
          label: '门磁传感器'
        }
        ],
        value: '',
        input1:"",
        input2:'',
        GN: [{
          value: '监测',
          label: '监测'
        }, {
          value: '监控',
          label: '监控'
        }, {
          value: '控制',
          label: '控制'
        }
        ],
        value1: '',
        jks: [{
          value: 'AI',
          label: 'AI'
        }, {
          value: 'DI',
          label: 'DI'
        }, {
          value: 'DO',
          label: 'DO'
        }
        ],
        JK: '',
        headername:'新增设备'
    }
  },
  computed: {
      
  },
  methods: {
    closeMyself () {
      this.$emit('on-close')
    },
    
  }
}
</script>

<style scoped>
.devicepopup{
  width: 360px;
  height: 300px;
  background: #f5f5f5;
  overflow: hidden;
  /*position: fixed;*/
  /*left: 50%;
  margin-left: -180px;
  top: 50%;
  margin-top: -150px;
  z-index: 99;*/
  border-radius: 10px;
}
.popupheader{
  height: 40px;
  background: #409EFF;
  width: 100%;
  line-height: 40px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 3px;
  text-indent: 30px;
  position: relative;
}
.popupheader .el-button{
  font-size: 20px;
  height: 25px;
  width: 25px;
  padding: 0px;
  margin: 0px;
  float: right;
  margin-right: 15px;
  margin-top: 7px;
}
.popupcontent{
  height: 220px;
  width: 100%;
  overflow-y:scroll;
}
.popupcontent ul li{
  width: 100%;
  height: 40px;
  overflow: hidden;
  margin: 0px;
}
.popupcontent ul li span{
  display: block;
  float: left;
  width: 100px;
  margin-left: 30px;
  height: 40px;
  line-height: 40px;
}
.popupfooter{
  height: 40px;
  width: 100%;
}
.popupbox{
  width: 200px;
  height: 30px;
  overflow: hidden;
  position: relative;
  top: 6px;
}
li[data-v-75720746]{
  display: block;
  margin: 0px;
}
.el-select{
  display: block;
}
.popupfooter .el-button{
  margin-left:75px;
  margin-top: 7px;
  width: 70px;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600
}
</style>
